<template>
  <div class="items-page">
    <!-- 标题区域 -->
    <div class="title-section">
      <h1 class="main-title">道具图鉴</h1>
      <p class="subtitle">发现各种有用的道具</p>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="search-section">
      <div class="search-bar">
        <!-- 分类目录按钮 -->
        <div class="category-dropdown">
          <input type="checkbox" id="category-dropdown-checkbox" class="category-dropdown-checkbox"
            v-model="categoryDropdownOpen" aria-label="切换分类目录" aria-expanded="false">
          <label for="category-dropdown-checkbox" class="category-dropdown-label">
            <div class="dropdown-icon">
              <div class="hamburger-line"></div>
              <div class="hamburger-line"></div>
              <div class="hamburger-line"></div>
            </div>
            <span class="category-text">道具</span>
            <el-icon class="dropdown-arrow" :class="{ 'dropdown-arrow-open': categoryDropdownOpen }">
              <ArrowDown />
            </el-icon>
          </label>
          <div class="category-dropdown-menu" v-show="categoryDropdownOpen">
            <div class="category-menu-header">道具分类</div>
            <ul class="category-menu-list">
              <li v-for="category in itemCategories" :key="category.id" class="category-menu-item">
                <a href="#" @click.prevent="scrollToCategory(category.type)" class="category-link"
                  :style="{ borderLeft: `4px solid ${category.color}` }">
                  <span class="category-emoji">{{ category.icon }}</span>
                  <span class="category-name">{{ category.name }}</span>
                  <span class="category-count">({{ category.count }})</span>
                </a>
              </li>
            </ul>
          </div>
        </div>

        <el-input v-model="searchKeyword" placeholder="搜索道具名称..." class="search-input" size="large"
          @keyup.enter="searchItems">
          <template #prefix>
            <el-icon>
              <Search />
            </el-icon>
          </template>
        </el-input>
        <el-button type="primary" size="large" @click="searchItems" class="search-btn">
          <el-icon>
            <Search />
          </el-icon>
          搜索
        </el-button>
        <el-button type="default" size="large" @click="resetFilters" class="reset-btn">
          重置
        </el-button>
      </div>
    </div>
  </div>

  <!-- 道具列表 -->
  
  <div class="items-list-container">
    <span class="item-tital0" data-category="精灵球">精灵球</span>
    <div class="items-list1">
      <el-table :data="itemsCategories_0" stripe style="width: 100%; color: black;">
        <el-table-column prop="id" label="编号" width="100" header-align="center" align="center"></el-table-column>
        <!-- <el-table-column label="道具图片" #default="scope" width="120">
          <img 
            :src="getPokeballImageUrl(scope.row)" 
            :alt="scope.row.pokeballName || '精灵球'" 
            width="80px" 
            height="auto"
            @error="handleImageError($event, scope.row)"
            @load="handleImageLoad($event, scope.row)"
          >
        </el-table-column> -->
        <el-table-column prop="pokeballName" label="道具名称" width="220"></el-table-column>
        <el-table-column prop="description" label="描述" width="600"></el-table-column>
      </el-table>
    </div>
    <span class="item-tital" data-category="野外使用的道具">野外使用的道具</span>
    <div class="items-list1">
      <el-table :data="itemsCategories_1" stripe style="width: 100%; color: red;">
        <el-table-column prop="id" label="编号" width="80" header-align="center" align="center"></el-table-column>
        <el-table-column prop="itemName" label="道具名称"></el-table-column>
        <el-table-column prop="description" label="描述" width="550"></el-table-column>
      </el-table>
    </div>
    <span class="item-tital" data-category="培养宝可梦的道具">培养宝可梦的道具</span>
    <div class="items-list1">
      <el-table :data="itemsCategories_2" stripe style="width: 100%; color: blue;">
        <el-table-column prop="id" label="编号" width="80" header-align="center" align="center"></el-table-column>
        <el-table-column prop="itemName" label="道具名称"></el-table-column>
        <el-table-column prop="description" label="描述" width="550"></el-table-column>
      </el-table>
    </div>
    <span class="item-tital"  data-category="进化道具">进化道具</span>
    <div class="items-list1">
      <el-table :data="itemsCategories_3" stripe style="width: 100%; color: green;">
        <el-table-column prop="id" label="编号" width="80" header-align="center" align="center"></el-table-column>
        <el-table-column prop="itemName" label="道具名称"></el-table-column>
        <el-table-column prop="description" label="描述" width="550"></el-table-column>
      </el-table>
    </div>
    <span class="item-tital" data-category="可交换道具">可交换道具</span>
    <div class="items-list1">
      <el-table :data="itemsCategories_4" stripe style="width: 100%; color: orange;">
        <el-table-column prop="id" label="编号" width="80" header-align="center" align="center"></el-table-column>
        <el-table-column prop="itemName" label="道具名称"></el-table-column>
        <el-table-column prop="description" label="描述" width="550"></el-table-column>
      </el-table>
    </div>
    <span class="item-tital" data-category="其他">其他</span>
    <div class="items-list1">
      <el-table :data="itemsCategories_5" stripe style="width: 100%; color: purple;">
        <el-table-column prop="id" label="编号" width="80" header-align="center" align="center"></el-table-column>
        <el-table-column prop="itemName" label="道具名称"></el-table-column>
        <el-table-column prop="description" label="描述" width="550"></el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script setup>
import { ref, onMounted, computed, nextTick } from 'vue'
import { getItemsList, getPokeballsList, getMockItemsList, getItemsByCategory } from '@/api/items.api.js'
// 移除了所有提示
import { Search, Menu, ArrowDown } from '@element-plus/icons-vue'

// 响应式数据
const itemsList = ref([])
const allItemsData = ref([])
const loading = ref(false)
const dialogVisible = ref(false)
const selectedItem = ref(null)

const itemsCategories_0 = ref([])
const itemsCategories_1 = ref([])
const itemsCategories_2 = ref([])
const itemsCategories_3 = ref([])
const itemsCategories_4 = ref([])
const itemsCategories_5 = ref([])


// 搜索和筛选
const searchKeyword = ref('')
const categoryDropdownOpen = ref(false)

// 道具分类定义
const itemCategories = computed(() => {
  const categories = [
    { id: 0, type: '精灵球', name: '精灵球', icon: '⚾', color: '#e53e3e', count: 0 },
    { id: 1, type: '野外使用的道具', name: '野外使用的道具', icon: '🏔️', color: '#38a169', count: 0 },
    { id: 2, type: '培养宝可梦的道具', name: '培养宝可梦的道具', icon: '🎯', color: '#3182ce', count: 0 },
    { id: 3, type: '进化道具', name: '进化道具', icon: '🌟', color: '#d69e2e', count: 0 },
    { id: 4, type: '可交换道具', name: '可交换道具', icon: '🔄', color: '#f0a018', count: 0 },
    { id: 5, type: '其他', name: '其他', icon: '🌰', color: '#d45455', count: 0 },
    // { id: 6, type: '太晶碎块', name: '太晶碎块', icon: '💎', color: '#805ad5', count: 0 },
    // { id: 7, type: '携带物品', name: '携带物品', icon: '🎒', color: '#319795', count: 0 },
  ]

  // 计算每个分类的道具数量
  categories.forEach(category => {
    if (category.type === '精灵球') {
      category.count = allItemsData.value.filter(item => item.category === '精灵球').length
    } else {
      category.count = allItemsData.value.filter(item => item.category === category.type).length
    }
  })

  // 返回所有分类（包括数量为0的分类，以便展示完整的分类列表）
  return categories
})

// 显示的道具列表（经过筛选的）
const displayedItems = computed(() => {
  return itemsList.value
})



// 获取道具列表
const fetchItemsList = async () => {
  try {
    loading.value = true

    let allItems = []

    try {
      // 同时获取通用道具和精灵球数据
      const [itemsResponse, pokeballsResponse] = await Promise.all([
        getItemsList().catch(err => {
          return null
        }),
        getPokeballsList().catch(err => {
          return null
        })
      ])

      // 处理通用道具数据
      if (itemsResponse && itemsResponse.data) {
        const items = Array.isArray(itemsResponse.data) ? itemsResponse.data : []
        // 将后端的category字段映射到前端的分类
        const mappedItems = items.map(item => ({
          ...item,
          category: mapBackendCategoryToFrontend(item.category)
        }))
        allItems.push(...mappedItems)
      }

      // 处理精灵球数据
      if (pokeballsResponse && pokeballsResponse.data) {
        const pokeballs = Array.isArray(pokeballsResponse.data) ? pokeballsResponse.data : []
        // 将精灵球数据转换为统一格式
        const mappedPokeballs = pokeballs.map(ball => ({
          id: ball.id,
          itemId: ball.ballId || ball.pokeball_id,
          itemName: ball.pokeballName || ball.pokeball_name,
          description: ball.description,
          imageUrl: ball.imageUrl || ball.image_url,
          category: '精灵球',
          catchRate: ball.catchRate || ball.catch_rate,
          ballCategory: ball.category
        }))
        allItems.push(...mappedPokeballs)
      }

    } catch (error) {
      // // 移除了提示
    }

    // 如果没有获取到数据，显示错误信息
    if (allItems.length === 0) {
      // // 移除了提示
    }

    itemsList.value = allItems
    allItemsData.value = allItems
  } catch (error) {
    // // 移除了提示
    // 设置空数据
    itemsList.value = []
    allItemsData.value = []
  } finally {
    loading.value = false
  }
}

// 将后端分类映射到前端分类
const mapBackendCategoryToFrontend = (backendCategory) => {
  const categoryMap = {
    'field': '野外使用的道具',
    'training': '培养宝可梦的道具',
    'evolution': '进化道具',
    'exchange': '可交换道具',
    'other': '携带物品'
  }
  return categoryMap[backendCategory] || '携带物品'
}


// 搜索道具
const searchItems = () => {
  let filtered = [...allItemsData.value]

  // 名称搜索
  if (searchKeyword.value.trim()) {
    const keyword = searchKeyword.value.trim().toLowerCase()
    filtered = filtered.filter(item =>
      item.itemName?.toLowerCase().includes(keyword)
    )
  } else {
    // // 移除了提示`)
  }

  itemsList.value = filtered
}

// 重置筛选
const resetFilters = () => {
  searchKeyword.value = ''
  itemsList.value = [...allItemsData.value]
  // // 移除了提示
}

// 选择道具
const selectItem = (item) => {
  selectedItem.value = item
  dialogVisible.value = true
}

// // 根据分类获取道具
// const getItemsByCategory = (categoryType) => {
//   // 返回指定分类的所有道具，不限制数量
//   return allItemsData.value.filter(item => item.category === categoryType)
// }

// 滚动到指定分类
const scrollToCategory = (categoryType) => {
  // 使用更精确的选择器来定位标题元素
  const element = document.querySelector(`.item-tital[data-category="${categoryType}"]`) || 
                  document.getElementById(`category-${categoryType}`);
  
  if (element) {
    // 使用smooth滚动到指定位置
    element.scrollIntoView({
      behavior: 'smooth',
      block: 'start',
      inline: 'nearest'
    });


    
    // 关闭下拉菜单
    categoryDropdownOpen.value = false;
  } else {
    console.warn(`未找到分类元素: ${categoryType}`);
  }
}

// 页面挂载时获取数据
onMounted(() => {
  fetchItemsList()
})

getPokeballsList().then((respose) => {
  itemsCategories_0.value = respose
});
getItemsByCategory("field").then((respose) => {
  itemsCategories_1.value = respose
});
getItemsByCategory("training").then((respose) => {
  itemsCategories_2.value = respose
});
getItemsByCategory("training").then((respose) => {
  itemsCategories_3.value = respose
});
getItemsByCategory("exchange").then((respose) => {
  itemsCategories_4.value = respose
});
getItemsByCategory("other").then((respose) => {
  itemsCategories_5.value = respose
});

// 获取精灵球图片URL
const getPokeballImageUrl = (item) => {
  // 调试信息
  console.log('精灵球item数据:', item)
  console.log('item.id:', item.id)
  console.log('item所有属性:', Object.keys(item))
  
  // 如果有后端提供的imageUrl，优先使用
  if (item.imageUrl && !item.imageUrl.includes('undefined') && !item.imageUrl.includes('null')) {
    console.log('使用后端提供的imageUrl:', item.imageUrl)
    return item.imageUrl
  }
  
  // 直接使用ID来映射图片，这应该是最简单可靠的方法
  // 因为你的精灵球数据中应该有按顺序的ID
  if (item.id && item.id >= 1 && item.id <= 23) {
    const imageUrl = `/balls/${item.id}.png`
    console.log('使用ID映射，生成的URL:', imageUrl)
    return imageUrl
  }
  
  // 如果没有ID，尝试根据名称映射
  const pokeballNameToImageId = {
    '精灵球': 1,
    '超级球': 2, 
    '高级球': 3,
    '大师球': 4,
    '狩猎球': 5,
    '捕网球': 6,
    '潜水球': 7,
    '巢穴球': 8,
    '重复球': 9,
    '计时球': 10,
    '贵重球': 11,
    '黑暗球': 12,
    '速度球': 13,
    '友友球': 14,
    '治愈球': 15,
    '沉重球': 16,
    '纪念球': 17,
    '公园球': 18,
    '梦境球': 19,
    '大竞赛球': 20,
    '先机球': 21,
    '等级球': 22,
    '月亮球': 23
  }
  
  const pokemonName = item.itemName || item.pokeballName || item.pokeball_name || item.name || ''
  const imageId = pokeballNameToImageId[pokemonName]
  if (imageId) {
    console.log('使用名称映射，生成的URL:', `/balls/${imageId}.png`)
    return `/balls/${imageId}.png`
  }
  
  // 默认使用第一个图片
  console.log('使用默认图片: /balls/1.png')
  return '/balls/1.png'
}

// 图片加载成功处理
const handleImageLoad = (event, item) => {
  console.log('图片加载成功:', event.target.src, 'for item:', item)
}

// 图片加载失败处理
const handleImageError = (event, item) => {
  console.log('图片加载失败:', event.target.src, 'for item:', item)
  // 尝试使用默认图片
  event.target.src = '/balls/1.png'
}

</script>

<style scoped>
.items-list-container {
  width: 100%;
  /* height: 800vh; */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.9);
  /* 白色背景，10% 透明度 */
}

.item-tital0 {
  width: 50%;
  font-size: 4vh;
  font-weight: bold;
  position: relative;
  margin-top: 2vh;
  margin-bottom: 1vh;
  z-index: 2;
}

.item-tital {
  width: 50%;
  font-size: 4vh;
  font-weight: bold;
  position: relative;
  margin-top: 5vh;
  margin-bottom: 1vh;
  z-index: 2;
}

.items-list1 {
  width: 50%;
  position: relative;
  left: 0;
  /* background-color: #1890ff; */
}

.items-page {
  padding: 40px 20px;
}

/* 标题区域 */
.title-section {
  text-align: center;
  margin-bottom: 50px;
}

.main-title {
  font-size: 3.5rem;
  font-weight: bold;
  color: #2c5aa0;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  animation: fadeInUp 1s ease-out;
}

.subtitle {
  font-size: 1.2rem;
  color: #666;
  margin: 10px 0 0 0;
  animation: fadeInUp 1s ease-out 0.2s both;
}

/* 搜索区域 */
.search-section {
  max-width: 1200px;
  margin: 0 auto 40px auto;
  padding: 0 20px;
}

.search-bar {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  max-width: 400px;
  min-width: 250px;
}

.search-btn {
  min-width: 120px;
  border-radius: 25px;
  font-weight: 600;
  background-color: #1890ff !important;
  border-color: #1890ff !important;
}

.search-btn:hover {
  background-color: #096dd9 !important;
  border-color: #096dd9 !important;
}

.reset-btn {
  min-width: 80px;
  border-radius: 25px;
  font-weight: 600;
  border: 2px solid #dcdfe6;
  transition: all 0.3s ease;
  color: white !important;
}

.reset-btn:hover {
  border-color: #c0c4cc;
  background-color: #f5f7fa;
}

.reset-primary-btn {
  color: white !important;
}

/* 道具网格 */
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 25px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 道具卡片 */
.item-card {
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  gap: 15px;
}

.item-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.item-image {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  background: linear-gradient(145deg, #f0f2f5, #ffffff);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.item-image img {
  max-width: 60px;
  max-height: 60px;
  object-fit: contain;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.item-name {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  margin: 0 0 10px 0;
}

.item-meta {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.category-badge {
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
}

.category-badge.large {
  padding: 6px 16px;
  font-size: 0.9rem;
}

.category-badge.medicine {
  background: #e74c3c;
}

.category-badge.pokeball {
  background: #e67e22;
}

.category-badge.battle {
  background: #9b59b6;
}

.category-badge.key {
  background: #f39c12;
}

.category-badge.tm {
  background: #3498db;
}

.category-badge.berry {
  background: #27ae60;
}

.category-badge.evolution {
  background: #8e44ad;
}

.category-badge.decoration {
  background: #f1c40f;
}

.category-badge.default {
  background: #95a5a6;
}

.price-tag {
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
  background: #2ecc71;
  color: white;
}

.price-tag.large {
  padding: 6px 16px;
  font-size: 0.9rem;
}

.item-description {
  color: #666;
  line-height: 1.5;
  font-size: 0.95rem;
  flex: 1;
}

/* 详情弹窗 */
.item-detail {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.detail-image {
  flex-shrink: 0;
}

.detail-image img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: linear-gradient(145deg, #f0f2f5, #ffffff);
  border-radius: 15px;
  padding: 20px;
}

.detail-info {
  flex: 1;
}

.detail-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.detail-description,
.detail-effect,
.detail-location {
  margin-bottom: 20px;
}

.detail-description h4,
.detail-effect h4,
.detail-location h4 {
  color: #2c5aa0;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.detail-description p,
.detail-effect p,
.detail-location p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* 加载状态 */
.loading-state {
  text-align: center;
  padding: 100px 0;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-content {
  color: #666;
}

.loading-content p {
  margin-top: 20px;
  font-size: 1.1rem;
}

/* 精灵球加载动画 */
.pokeball-loading {
  display: inline-block;
}

.pokeball {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: relative;
  animation: pokeball-spin 2s linear infinite;
}

.pokeball-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  border-radius: 60px 60px 0 0;
  border: 3px solid #333;
  border-bottom: 2px solid #333;
}

.pokeball-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(135deg, #ffffff, #f8f9fa);
  border-radius: 0 0 60px 60px;
  border: 3px solid #333;
  border-top: 2px solid #333;
}

.pokeball-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: #ffffff;
  border: 4px solid #333;
  border-radius: 50%;
  z-index: 10;
}

.pokeball-center::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #333;
  border-radius: 50%;
}

@keyframes pokeball-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 100px 0;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-content {
  color: #999;
  max-width: 400px;
}

.empty-content h3 {
  color: #666;
  font-size: 1.5rem;
  margin: 20px 0 10px 0;
}

.empty-content p {
  color: #999;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 30px;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 20px;
  opacity: 0.5;
}

/* 动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 分类相关样式 */
.category-dropdown {
  position: relative;
  display: inline-block;
}

.category-dropdown-checkbox {
  display: none;
}

.category-dropdown-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #667eea;
  color: white;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  font-weight: 500;
}

.category-dropdown-label:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.dropdown-icon {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hamburger-line {
  width: 18px;
  height: 2px;
  background-color: white;
  border-radius: 1px;
  transition: all 0.3s ease;
}

.category-dropdown-checkbox:checked+.category-dropdown-label .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translateY(4px);
}

.category-dropdown-checkbox:checked+.category-dropdown-label .hamburger-line:nth-child(2) {
  opacity: 0;
}

.category-dropdown-checkbox:checked+.category-dropdown-label .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translateY(-4px);
}

.dropdown-arrow {
  transition: transform 0.3s ease;
}

.dropdown-arrow-open {
  transform: rotate(180deg);
}

.category-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  margin-top: 8px;
  overflow: hidden;
  animation: dropdown-fade-in 0.3s ease;
}

.category-menu-header {
  padding: 16px 20px 12px;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  font-weight: bold;
  color: #495057;
  border-bottom: 1px solid #dee2e6;
}

.category-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-menu-item {
  border-bottom: 1px solid #f1f3f4;
}

.category-menu-item:last-child {
  border-bottom: none;
}

.category-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease;
  position: relative;
}

.category-link:hover {
  background: #f8f9fa;
  transform: translateX(4px);
}

.category-emoji {
  font-size: 1.2rem;
  width: 24px;
  text-align: center;
}

.category-name {
  flex: 1;
  font-weight: 500;
}

.category-count {
  font-size: 0.9rem;
  color: #6c757d;
  background: #e9ecef;
  padding: 2px 8px;
  border-radius: 12px;
}

/* 分类区域样式 */
.category-sections {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.category-section {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.category-section:hover {
  transform: translateY(-2px);
}

.category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  color: white;
  font-weight: bold;
  position: relative;
}

.category-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.category-title {
  flex: 1;
  margin: 0;
  font-size: 1.3rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.category-icon {
  font-size: 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-count {
  background: rgba(255, 255, 255, 0.2);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: normal;
}

@keyframes dropdown-fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-title {
    font-size: 2.5rem;
  }

  .items-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 10px;
  }

  .search-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input {
    max-width: none;
  }

  .item-detail {
    flex-direction: column;
    text-align: center;
  }

  .detail-image img {
    width: 100px;
    height: 100px;
  }
}

@media (max-width: 480px) {
  .main-title {
    font-size: 2rem;
  }

  .items-page {
    padding: 20px 10px;
  }

  .item-card {
    flex-direction: column;
    text-align: center;
  }

  .item-image {
    align-self: center;
  }
}

/* 道具表格样式 */
.category-container {
  margin-bottom: 40px;
}

.category-main-title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #2d3748;
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 4px solid #3182ce;
}

.items-table-wrapper {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table-header {
  color: white;
  font-weight: bold;
}

.table-header th {
  padding: 12px 8px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.table-header th:last-child {
  border-right: none;
}

.icon-column {
  width: 60px;
}

.name-column {
  width: 120px;
}

.japanese-column {
  width: 150px;
}

.english-column {
  width: 150px;
}

.description-column {
  width: auto;
  min-width: 200px;
}

.item-row {
  cursor: pointer;
  transition: background-color 0.2s;
}

.item-row:hover {
  background-color: #f7fafc;
}

.item-row:nth-child(even) {
  background-color: #f8f9fa;
}

.item-row:nth-child(even):hover {
  background-color: #e2e8f0;
}

.item-row td {
  padding: 12px 8px;
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
  vertical-align: middle;
}

.icon-cell {
  width: 60px;
}

.item-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.item-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.name-cell {
  font-weight: 600;
  color: #2d3748;
}

.japanese-cell {
  color: #4a5568;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
}

.english-cell {
  color: #4a5568;
  font-style: italic;
}

.description-cell {
  text-align: left;
  color: #718096;
  line-height: 1.4;
  font-size: 13px;
}

.empty-category {
  text-align: center;
  padding: 40px 20px;
  color: #a0aec0;
  font-style: italic;
}

/* 响应式表格 */
@media (max-width: 768px) {
  .items-table-wrapper {
    overflow-x: auto;
  }

  .items-table {
    min-width: 800px;
    font-size: 12px;
  }

  .table-header th,
  .item-row td {
    padding: 8px 4px;
  }

  .category-main-title {
    font-size: 1.5rem;
  }

  .description-cell {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .category-main-title {
    font-size: 1.3rem;
    margin-bottom: 15px;
  }

  .items-table {
    min-width: 700px;
    font-size: 11px;
  }

  .icon-column,
  .icon-cell {
    width: 50px;
  }

  .item-icon {
    width: 30px;
    height: 30px;
  }

  .name-column {
    width: 100px;
  }

  .japanese-column,
  .english-column {
    width: 120px;
  }
}
</style>